<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-08-29 15:34:18
 * @LastEditTime: 2023-12-15 10:10:33
-->
<template>
    <div @click="handClick" :class="select.isHit ? 'title2' : 'title'" :style="myStyles"
        v-if="!isHasHead && !isHasHouse && !isHasCustomer && !isHasNews">
        <div class="pd" :class="select.isSelect ? 'pd2' : ''" v-show="!select.isHit">{{ select.nowSelectName }}</div>
        <div class="pd3" v-show="select.isHit">{{ select.nowSelectName }}&ensp;</div>
        <img class="imgRow pd" src="../../assets/images/upRow.svg">

        <div class="popup" v-if="show && !disabled" :style="myStyles">
            <div class="item_name" v-for="s in dataList" v-bind:key="s" @click="selectItem(s)">
                <div v-if="s[keys] === select.nowSelectName" class="item_name_default">{{ s[keys] }}</div>
                <div v-else>{{ s[keys] }}</div>
            </div>
        </div>
    </div>

    <div @click="handClick" :class="select.isHit ? 'title2' : 'title'" :style="myStyles"
        v-if="isHasHead || isHasHouse || isHasCustomer || isHasNews">
        <input class="pd" :class="select.isSelect ? 'pd2' : ''" v-show="!select.isHit" v-model="select.nowSelectName"
            :disabled="disabled" :placeholder="hit" :style="childStyle">
        <div class="pd3" v-show="select.isHit" :style="childStyle">{{ select.nowSelectName }}&ensp;</div>
        <img class="imgRow pd" src="../../assets/images/upRow.svg">

        <div class="popup" v-if="show && !disabled" :style="myStyles">

            <div v-if="isShowSearch" @click.stop=""
                style="display: flex;padding: 3px 7px;margin: 3px;border: 1px solid #2196F3;border-radius: 3px;">
                <img style="width: 18px;height: 18px;" src="../../assets/images/search2.png" @click="search" />
                <input v-model="select.nowSelectName">
            </div>

            <div class="item_name" v-for="s in dataListCopy" v-bind:key="s" @click.stop="selectItem(s)">
                <div v-if="s[keys] === select.nowSelectName" class="item_name_default df">
                    <div class="df1">
                        <CommonImage :src="s.avatar" class="userHead" v-if="!isHasHouse && !isHasNews"></CommonImage>
                        {{ s[keys] }}
                    </div>
                    <div>{{ s[keys2] }}</div>
                </div>
                <div v-else class="df">
                    <div class="df1">
                        <CommonImage :src="s.avatar" class="userHead" v-if="!isHasHouse && !isHasNews"></CommonImage>
                        {{ s[keys] }}
                    </div>
                    <div>{{ isHasHouse ? 'NO.' : '' }}{{ s[keys2] }}</div>
                </div>
            </div>

        </div>
    </div>

    <div class="overlay" v-if="show" @click="handClick"></div>
</template>
    
<script>
import { getUserLikeRealName, findAllTitleAndId, findLikeNameOrPhone, newsSearchByName } from "../../http/api"
import CommonImage from "./CommonImage.vue"
export default {
    name: "CommonSelect",
    emits: ["returnData", "clearData", "mustCount"],
    components: { CommonImage },
    props: {
        dataList: Array,
        default: String,
        isDefaultHit: Boolean,
        index: Number,
        disabled: Boolean,
        myStyles: {
            default: { width: "156px" },
        },
        childStyle: {
            default: {}
        },
        isMust: {
            default: false,
            type: Boolean,
        },
        mustHit: {
            default: "",
            type: String,
        },
        keys: {
            default: "realName",
        },
        keys2: {
            default: "orgName",
        },
        hit: String,
        clear: Boolean,
        isHasHead: Boolean,
        isHasHouse: Boolean,
        isHasCustomer: Boolean,
        isHasNews: Boolean,
        isShowSearch: Boolean,
        isSelect: {
            default: false,
        },
        isinputFlag: {
            default: false,
        }
    },
    data() {
        return {
            show: false,
            select: {
                isSelect: this.isSelect,
                nowSelectName: this.default,
                isHit: false,
            },
            dataListCopy: [],
            inputFlag: this.isinputFlag
        }
    },
    mounted() {
        if (this.isHasHead) {
            getUserLikeRealName({ realName: this.select.nowSelectName })
                .then((res) => {
                    if (res !== undefined) {
                        this.dataListCopy = res
                    }
                })
                .catch()
        }
        if (this.isHasHouse) {
            findAllTitleAndId({ name: this.select.nowSelectName })
                .then((res) => {
                    if (res !== undefined) {
                        this.dataListCopy = res
                    }
                })
                .catch()
        }
        if (this.isHasCustomer) {
            findLikeNameOrPhone({ nameOrPhone: this.select.nowSelectName })
                .then((res) => {
                    if (res !== undefined) {
                        this.dataListCopy = res
                    }
                })
                .catch()
        }
        if (this.isHasNews) {
            newsSearchByName({ name: this.select.nowSelectName })
                .then((res) => {
                    if (res !== undefined) {
                        this.dataListCopy = res
                    }
                })
                .catch()
        }
    },
    methods: {
        handClick() {
            this.show = !this.show
            if (this.show) {
                this.$nextTick(() => {
                    const popupEl = document.querySelector(".popup")
                    if (!popupEl) {
                        return
                    }
                    //如果找到了弹出框元素, 计算弹出框底部距离窗口底部的距离
                    const bottomDist = popupEl.getBoundingClientRect().bottom - window.innerHeight
                    // 如果底部距离小于弹出框高度，说明弹出框被遮挡，需要向上移动
                    if (bottomDist > 30) {
                        // 修改弹出框的样式，将其向上移动
                        popupEl.style.top = `-250px`
                    } else {
                        // 如果不被遮挡，清除样式，恢复原位置
                        popupEl.style.top = "none"
                    }
                })
            }
            if (this.disabled)
                return

            if (this.isHasHead || this.isHasHouse || this.isHasCustomer || this.isHasNews) {
                if (!this.inputFlag) {
                    this.select.nowSelectName = ''
                    return this.$emit("returnData", '', this.index)
                }
            }
        },
        selectItem(s) {
            if (this.isHasHead || this.isHasHouse || this.isHasCustomer || this.isHasNews) {
                this.show = !this.show
            }
            this.inputFlag = true
            this.select = {
                isSelect: true,
                nowSelectName: s[this.keys],
                isHit: false,
            }
            return this.$emit("returnData", s, this.index)
        },
        inputReturn() {
            let flag = true
            if (this.isMust) {
                if (!this.select.nowSelectName?.trim() || this.select.nowSelectName == null) {
                    this.select.nowSelectName = this.mustHit
                    this.select.isHit = true
                    flag = false
                }
                if (this.select.nowSelectName == this.default && !this.isSelect && this.isDefaultHit) {
                    this.select.nowSelectName = this.mustHit
                    this.select.isHit = true
                    flag = false
                }
                if (this.select.nowSelectName == this.mustHit) {
                    flag = false
                }
            }
            return flag
        },
    },
    watch: {
        clear: {
            handler() {
                this.select.nowSelectName = ""
            },
        },
        default() {
            this.select.nowSelectName = this.default
        },
        isSelect() {
            this.select.isSelect = this.isSelect
        },
        "select.nowSelectName": {
            handler() {
                if (this.isHasHead) {
                    getUserLikeRealName({ realName: this.select.nowSelectName })
                        .then((res) => {
                            if (res !== undefined) {
                                this.dataListCopy = res
                            }
                        })
                        .catch()
                    if (this.show)
                        this.inputFlag = false
                }
                if (this.isHasHouse) {
                    findAllTitleAndId({ name: this.select.nowSelectName })
                        .then((res) => {
                            if (res !== undefined) {
                                this.dataListCopy = res
                            }
                        })
                        .catch()
                    if (this.show)
                        this.inputFlag = false
                }
                if (this.isHasCustomer) {
                    findLikeNameOrPhone({ nameOrPhone: this.select.nowSelectName })
                        .then((res) => {
                            if (res !== undefined) {
                                this.dataListCopy = res
                            }
                        })
                        .catch()
                    if (this.show)
                        this.inputFlag = false
                }
                if (this.isHasNews) {
                    newsSearchByName({ name: this.select.nowSelectName })
                        .then((res) => {
                            if (res !== undefined) {
                                this.dataListCopy = res
                            }
                        })
                        .catch()
                    if (this.show)
                        this.inputFlag = false
                }

            },
        },
    },
    computed: {},
}
</script>
    
<style scoped>
input {
    outline: none;
    border: none;
    width: 100%;
}

.df1 {
    display: flex;
    align-items: center;
}

.df {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.userHead {
    width: 18px;
    height: 18px;
    border: 1px solid #d4d4d4;
    border-radius: 100%;
    margin-right: 10px;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
    /* visibility: hidden; */
}

.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border: 1px solid #e1e1e1;
    font-size: 12px;
    width: 120px;
    border-radius: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: rgb(153, 153, 153);
    margin: 1px;
    height: 14px;
    width: 156px;
    position: relative;
}

.title2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border: 1px solid red;
    font-size: 12px;
    width: 120px;
    border-radius: 2px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: rgb(153, 153, 153);
    margin: 1px;
    position: relative;
}

.pd {
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.pd2 {
    color: black;
}

.pd3 {
    padding-left: 15px;
    padding-right: 10px;
    color: red;
    height: 14px;
    white-space: nowrap;
    overflow: hidden;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.pd3::before {
    content: "*";
    color: red;
    position: absolute;
    left: 9px;
    margin-top: 2px;
}

.popup {
    position: absolute;
    background: white;
    border: 1px solid #eee;
    box-shadow: 1px 1px 15px #e5e5e5;
    z-index: 2;
    font-size: 13px;
    margin-top: 1px;
    top: 23px;
    font-size: 12px;
    width: 156px;
    max-height: 250px;
    overflow: auto;
}

.imgRow {
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    padding-left: 5px;
}

.item_name {
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}

.item_name:hover {
    background-color: #eee;
}

.item_name_default {
    color: #6698ff;
}
</style>